<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
<body class="gray-bg">
	
	<div class="container-div ui-layout-center" id="applyContainer" style="padding:0;">
        <div style="margin: 10px;background: #fff;padding: 15px 0px;border-radius: 5px;overflow:scroll;" class="applyContainer">
            <strong style="font-size:17px;padding:0 16px;">审批历史</strong>
            <table style="border:1px solid #ccc !important;border-left:none;margin:5px 15px;width:750px;">
                <tr style="background: #1f90d8c4;color: #fff;">
                    <th style="border-left:1px solid #ccc;padding:5px;">流程名称</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">申请人工号</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">申请人</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">计划名称</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">审批人</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">报名原因</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">备注</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">状态</th>
                </tr>
                <tr v-for="item in planDetail" style="border-top:1px solid #ccc;">
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.flowName}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.applyUserId}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.applyUserName}}</td>
                    <td style="width:190px;border-left:1px solid #ccc;padding:5px;">{{item.planName}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.approvalUserName}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.signRemark}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.remark}}</td>
                    <td style="width:50px;border-left:1px solid #ccc;padding:5px;">{{item.outcome}}</td>
                </tr>
            </table>
            <div style="padding:20px 15px;" v-show="applyContainer"><p>备注：</p><textarea type="text" id="approveContainer" style="width: 100%;height:100px;"></textarea></div>
            
        </div>
        <div class="btn-group-sm hidden-xs" v-show="applyContainer" id="toolbar" role="group" style="padding:10px;text-align:center;width: 770px;position: fixed;bottom: 10px;">
                <a class="btn btn-success" @click="approveOk()"> <i class="fa fa-edit"></i> 通过 </a>
                <a class="btn btn-danger" @click="approveBad()"><i class="fa fa-remove"></i> 拒绝</a>
        </div>
    </div>
	<div th:include="include :: footer"></div>
    <script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
    <script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
	<script th:inline="javascript">
	    new Vue({
	        el:"#applyContainer",
	        data:{
	            planDetail:[],
	            applyContainer:false
	        },
	        mounted:function(){
	            this.applyDis();
	            $("#applyContainer .applyContainer").height($("#applyContainer").height()-80);
	           
	        },
	        methods:{
	            applyDis: function(){
	                var _this=this;
	                if(sessionStorage.getItem("currentStatus")=="进行中"){
	                    _this.applyContainer=true;
	                }else{
	                    _this.applyContainer=false;
	                }
                    _this.applyList();
	            },
	            applyList: function(){
	                var _this=this;
	                $.ajax({
                        url: location.origin+"/flow/mgr/list/process?processId="+sessionStorage.getItem('processId'),
                        type: "post",
                        dataType: "json",
                        success: function(result) {
                            _this.planDetail=result;
                        },
                        error: function(result){
                            $.modal.alertError(result.msg);
                        }
                    })
	            },
	            approveOk: function(){
	            	$.modal.confirm("确定通过吗？",function(){
	            		$.ajax({
	                        url: location.origin+"/flow/mgr/apply",
	                        type: "post",
	                        data:{
	                            "taskId":sessionStorage.getItem('taskId'),
	                            "remark":$("#approveContainer").val()
	                        },
	                        dataType: "json",
	                        success: function(result) {
	                            if(result.code=="500"){
	                                $.modal.alertError(result.msg);
	                            }else{
	                                window.parent.location.reload();
	                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	                                parent.layer.close(index);
	                            }
	                        },
	                        error: function(){
	                            $.modal.alertError(result.msg);
	                        }
	                    })
	            	})
	            },
	            approveBad: function(){
	            	$.modal.confirm("确定拒绝吗？",function(){
	            		$.ajax({
	                        url: location.origin+"/flow/mgr/reject",
	                        type: "post",
	                        dataType: "json",
	                        data:{
	                            "taskId":sessionStorage.getItem('taskId'),
	                            "remark":$("#approveContainer").val()
	                        },
	                        success: function(result) {
	                            if(result.code=="500"){
	                                $.modal.alertError(result.msg);
	                            }else{
	                                window.parent.location.reload();
	                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	                                parent.layer.close(index);
	                            }
	                        },
	                        error: function(){
	                            $.modal.alertError(result.msg);
	                        }
	                    })
	            	})
	                
	            }
	        }
	    })

	     function add() {

        	$.ajax({
        		cache : true,
        		type : "POST",
        		url : ctx + "personal/todo/list",
        		data : {

        		},
        		async : false,
        		error : function(request) {
        			$.modal.alertError("系统错误");
        		},
        		success : function(data) {
        			var data = { "code": 0,"msg":"成功" };
        			$.operate.saveSuccess(data);
        		}
        	});
        }

        function submitHandler() {
           add();
        }

	</script>
</body>
</html>